<template>
  <div class="chart-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="概况" name="1">
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-card>
              <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
              </el-date-picker>

              <el-select v-model="form.val" placeholder="选择类型">
                <el-option label="水" value="1">
                </el-option>
                <el-option label="电能" value="2">
                </el-option>
              </el-select>

              <el-button type="primary">确定</el-button>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">事件</h4>
              <div class="c-t-ct" style="color:#20A0FF;">103 件</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">高危</h4>
              <div class="c-t-ct" style="color:#FF4949;">5 件</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">重要</h4>
              <div class="c-t-ct" style="color:#13CE66;">18 件</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">已触犯预警</h4>
              <div class="c-t-ct" style="color:#13CE66;">7 件</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chartColumn" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chartBar" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chartLine" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chartPie" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="分析预警" name="2">

        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <div id="chartlc" style="width:100%; height:400px;"></div>
            </el-card>
          </el-col>
          <el-col :span="24">

          </el-col>
        </el-row>
         <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加模型</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_2_1" style="width: 100%">
                    <el-table-column prop="name" label="模型名称">
                    </el-table-column>
                    <el-table-column prop="y" label="废气泄漏(ml)">
                    </el-table-column>
                    <el-table-column prop="q" label="废液泄漏(ml)"></el-table-column>
                    <el-table-column prop="g" label="废料丢失(m³)"></el-table-column>
                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="180">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="配置规则" name="3">
        <el-row>
          <el-card class="charts-card">

            <el-col :span="24">
              <div id="chartSLASJ" style="width:100%; height:300px;"></div>
            </el-col>
            <el-col :span="24">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加预案</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_3_1" border style="width: 100%">
                    <el-table-column prop="zip" label="编号">
                    </el-table-column>
                    <el-table-column prop="temp" label="事件类型" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="预案名称" width="150">
                    </el-table-column>
                    <el-table-column prop="level" label="事件级别" width="120">
                    </el-table-column>
                    <el-table-column prop="plan" label="应急预案" width="120">
                    </el-table-column>
                    <el-table-column prop="per" label="负责人" width="120">
                    </el-table-column>
                    <el-table-column prop="way" label="方式" width="300">
                      <template scope="scope">
                      <el-tag type="primary">邮件</el-tag>
                      <el-tag type="primary">短信</el-tag>
                      <el-tag type="primary">电话</el-tag>
                      <el-tag type="primary">APP</el-tag>
                      <el-tag type="primary">FMCS投射</el-tag>
                      </template>
                    </el-table-column>

                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="180">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                      <template scope="scope">
                        <!-- <router-link :to="{ path: 'page97', query: { plan: 'private' }}">查看</router-link> -->
                        <el-button type="text" size="small" @click="$router.replace('/page97');">查看</el-button>
                        <el-button type="text" size="small" @click="$router.replace('/page96');">处理</el-button>
                        <!-- <router-link :to="{ path: 'page96', query: { plan: 'private' }}">处理</router-link> -->
                        
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-col>
          </el-card>
        </el-row>

        <!-- <el-row>
              <el-col :span="24">
                <el-card class="charts-card">
                  <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="通知形式">
                      <el-checkbox-group v-model="form.type">
                        <el-checkbox label="短信通报" name="type"></el-checkbox>
                        <el-checkbox label="邮件通报" name="type"></el-checkbox>
                        <el-checkbox label="FMCS大屏显示" name="type"></el-checkbox>
                        <el-checkbox label="APP监视" name="type"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">立即创建</el-button>
                      <el-button>取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-col>
            </el-row> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      form: {
        delivery: null,
        date1: null,
        date2: null,
        type: null,
      },
      activeName: '1',
      tableData_2_1: [{
        name: '智能推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '100',
        tj: 3.5,
      },{
        name: '智能推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 4.5,
      },{
        name: '人工推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 2.5,
      },{
        name: '人工推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 3.5,
      }],
      tableData_3_1: [{
        zip: '1',
        temp: '废气',
        name: '废气泄漏',
        level: 'level1',
        plan: '应急预案A',
        per: '张三',
        way: '邮件、短信、电话、APP、FMCS投射',
         tj: 3.5,
        status: '100',
      }, {
        zip: '2',
        temp: '废液',
        name: '废液泄漏',
        level: 'level2',
        plan: '应急预案B',
        per: '张三',
        way: '邮件、短信、电话、APP、FMCS投射',
         tj: 3.5,
        status: '100',
      }, {
        zip: '3',
        temp: '废料',
        name: '废料丢失',
        level: 'level1',
        plan: '应急预案C',
        per: '李四',
        way: '邮件、短信、电话、APP、FMCS投射',
         tj: 3.5,
        status: '100',
      }, {
        zip: '4',
        temp: '火警',
        name: '防火',
        level: 'level3',
        plan: '应急预案D',
        per: '李四',
        way: '邮件、短信、电话、APP、FMCS投射',
         tj: 3.5,
        status: '100',
      }, {
        zip: '4',
        temp: '噪音扰民',
        name: '噪音',
        level: 'level3',
        plan: '应急预案D',
        per: '李四',
        way: '邮件、短信、电话、APP、FMCS投射',
         tj: 3.5,
        status: '100',
      }],
      
      chartColumn: null,
      chartBar: null,
      chartLine: null,
      chartPie: null,
      chartLC: null,
      chartSLASJ: null,

    }
  },
  watch: {
    activeName() {
      // console.log('activeName')
      // this.drawCharts()
    }
  },
  methods: {
    drawColumnChart() {
      let dom = document.getElementById('chartColumn')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartColumn = echarts.init(dom);
      this.chartColumn.setOption({
        title: { text: '事件分类' },
        tooltip: {},
        xAxis: {
          data: ["废气泄漏", "废液泄漏", "废料丢失", "火警"]
        },
        yAxis: {},
        series: [{
          name: '报废数',
          type: 'bar',
          data: [5, 20, 36, 10]
        }]
      });
    },
    drawBarChart() {
      let dom = document.getElementById('chartBar')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartBar = echarts.init(dom);
      this.chartBar.setOption({
        title: {
          text: '区域性对比',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2011年', '2012年']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['区域A', '区域B', '区域C', '区域D', '区域E', '总体']
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      });
    },
    drawLineChart() {
      let dom = document.getElementById('chartLine')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartLine = echarts.init(dom);
      this.chartLine.setOption({
        title: {
          text: '能耗预警'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['电能', '水能', '化学品']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '电能',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '水能',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '化学品',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      });
    },
    drawPieChart() {
      let dom = document.getElementById('chartPie')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartPie = echarts.init(dom);
      this.chartPie.setOption({
        title: {
          text: '环保分析',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['废气泄漏', '废液泄漏', '废料丢失', '火警']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '废气泄漏' },
              { value: 310, name: '废液泄漏' },
              { value: 234, name: '废料丢失' },
              { value: 135, name: '火警' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    drawLCChart() {
      let dom = document.getElementById('chartlc')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartLC = echarts.init(dom);

      this.chartLC.setOption({
        title: {
          text: '事件预警'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['废气泄漏', '废液泄漏', '废料丢失', '噪音扰民', '火警']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '废气泄漏',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [12, 13, 10, 13, 9, 23, 21]
          },
          {
            name: '废液泄漏',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [22, 18, 19, 23, 29, 33, 31]
          },
          {
            name: '废料丢失',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [15, 23, 20, 15, 19, 33, 41]
          },
          {
            name: '噪音扰民',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [32, 33, 30, 33, 39, 33, 32]
          },
          {
            name: '火警',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: { normal: {} },
            data: [14, 15, 12, 14, 12, 13, 13],
            markLine: {
              lineStyle: {
                normal: {
                  type: 'solid',
                  color: 'rgb(180, 180, 180)'
                }
              },
              data: [{
                xAxis: '5月'
              }]
            }
          }
        ]
      }
      );
    },
    drawSLASJChart() {
      let dom = document.getElementById('chartSLASJ')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartSLASJ = echarts.init(dom);
      var hours = ['1', '2', '3', '4', '5', '6'];
      var days = ['1', '2', '3', '4', '5', '6'];
      var data = [[0, 0, 1], [1, 0, 1], [2, 0, 1], [3, 0, 1], [4, 0, 1], [5, 0, 1], [0, 1, 1], [0, 2, 1], [0, 3, 1], [0, 4, 1], [0, 5, 1], [1, 1, 2], [2, 1, 2], [3, 1, 2], [4, 1, 2], [5, 1, 2], [1, 2, 2], [1, 3, 2], [1, 4, 2], [1, 5, 2], [2, 2, 3], [3, 2, 3], [4, 2, 3], [5, 2, 3], [2, 3, 3], [2, 4, 3], [2, 5, 3], [3, 3, 4], [4, 3, 4], [5, 3, 4], [3, 4, 4], [3, 5, 4], [4, 4, 5], [5, 4, 5], [4, 5, 5], [5, 5, 6]];

      data = data.map(function(item) {
        return [item[1], item[0], item[2] || '-'];
      });
      let option = {
        title: { text: '事件级别分析' },
        tooltip: {
          // position: 'top'
        },
        // animation: false,
        xAxis: {
          type: 'category',
          data: hours,
          name: "危险度",
          splitArea: {
            show: true
          },
        },
        yAxis: {
          type: 'category',
          data: days,
          name: "重要度",
          splitArea: {
            show: true
          }
        },
        visualMap: {
          show: false,
          min: 1,
          max: 6,
        },
        series: [{
          name: '等级',
          type: 'heatmap',
          data: data,
          label: {
            normal: {
              show: true
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      this.chartSLASJ.setOption(option);
    },

    // 绘制
    drawCharts() {
      switch (this.activeName) {
        case '1':
          this.drawColumnChart()
          this.drawBarChart()
          this.drawLineChart()
          this.drawPieChart()
          break;
        case '2':
          this.drawLCChart()
          break;
        case '3':
          this.drawSLASJChart()
          break;
        default:
          break
      }
    },
    // 刷新
    resizeAllChart() {
      switch (this.activeName) {
        case '1':
          this.chartColumn.resize()
          this.chartBar.resize()
          this.chartLine.resize()
          this.chartPie.resize()
          break;
        case '2':
          this.chartLC.resize()
          break;
        case '3':
          this.chartSLASJ.resize()
          break;
        default:
          break
      }

    }
  },
  mounted() {
    // console.log('mounted')
    this.drawCharts()
    this.$nextTick(() => {
      window.onresize = this.resizeAllChart
    })
  },
  updated() {
    // console.log('updated')
    this.drawCharts()
    this.resizeAllChart()
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  float: left;
}
</style>